[#if !filterDates?? || filterDates?size == 0]
    <div class="form-group" id="dateContainer">
        <label class="col-xs-2 control-label">创建时间:</label>
        <div class="col-xs-10 col-sm-8">
            <div class="input-group" data-provide="datetimerangepicker"
                    data-date-format="YYYY-MM-DD HH:mm:ss">
                <input id="beginDate" name="beginDate" class="form-control begin-date"
                        type="text"
                        autoComplete="off"
                        value="${(form.beginDate?string(" yyyy-MM-dd HH:mm:ss"))!}">
                <span class="input-group-addon">-</span>
                <input id="endDate" name="endDate" class="form-control end-date" type="text"
                        autoComplete="off"
                        value="${(form.endDate?string(" yyyy-MM-dd HH:mm:ss"))!}">
            </div>

            <div class="date-items">
                <div class="date-item btn btn-default" data-day="0">今天</div>
                <div class="date-item btn btn-default " data-day="-1">昨天</div>
                <div class="date-item btn btn-default " data-day="3">近3天</div>
                <div class="date-item btn btn-default " data-day="7">近7天</div>
                <div class="date-item btn btn-default " data-day="30">近30天</div>
                <div class="date-item btn btn-default" data-day="999999999">清空</div>
            </div>
        </div>
    </div>
[#else]
    [#list filterDates as filterDate]

        <div class="form-group" id="dateContainer_${filterDate_index}">
            <label class="col-xs-2 control-label">${filterDate["label"]}:</label>
            <div class="col-xs-10 ${cols!'col-sm-8'}">
                <div class="input-group" data-provide="datetimerangepicker"
                        data-date-format="YYYY-MM-DD HH:mm:ss">
                    <input id="${filterDate["begin"]}" name="${filterDate["begin"]}" class="form-control begin-date"
                            type="text"
                            autoComplete="off"
                            value="${(form[filterDate["begin"]]?string(" yyyy-MM-dd HH:mm:ss"))!}">
                    <span class="input-group-addon">-</span>
                    <input id="${filterDate["end"]}" name="${filterDate["end"]}" class="form-control end-date" type="text"
                            autoComplete="off"
                            value="${(form[filterDate["end"]]?string(" yyyy-MM-dd HH:mm:ss"))!}">
                </div>

                <div class="date-items">
                    <div class="date-item btn btn-default" data-day="0">今天</div>
                    <div class="date-item btn btn-default " data-day="-1">昨天</div>
                    <div class="date-item btn btn-default " data-day="3">近3天</div>
                    <div class="date-item btn btn-default " data-day="7">近7天</div>
                    <div class="date-item btn btn-default " data-day="30">近30天</div>
                    <div class="date-item btn btn-default" data-day="999999999">清空</div>
                </div>
            </div>
        </div>

    [/#list]
[/#if]


<style>
    .date-items {
        display: flex;
        justify-content: space-between;
        align-content: center;
        flex-wrap: wrap;
        margin-top: 10px;
    }
</style>
<script>

    $().ready(function () {

        let $resetAll = $(".reset-all");
        let $filterModal = $("#filterModal");

        $resetAll.click(function () {
            $filterModal.find("input").val("");
            $filterModal.find(".selectpicker").val("");
            $filterModal.find(".selectpicker").selectpicker("refresh");
            $filterModal.find(".select").val("");
            $filterModal.find("input:checkbox").removeAttr("checked");
            $filterModal.find("input:radio").removeAttr("checked");

            // 回调函数，需要在包含页面提供该函数
            if(filterCallback && typeof filterCallback === "function"){
                filterCallback();
            }
        });


        [#if !filterDates?? || filterDates?size == 0]
        let $dateContainer = $("#dateContainer");
        $dateContainer.on("click", "div.date-item", function () {
            setBeginEndDate($(this));
        });
        [#else]
        [#list filterDates as filterDate]
        let $dateContainer${filterDate_index} = $("#dateContainer_${filterDate_index}");
        $dateContainer${filterDate_index}.on("click", "div.date-item", function () {
            setBeginEndDate($(this));
        });
        [/#list]

        [/#if]

        function setBeginEndDate(_this){

            let day = Number(_this.data("day"));
            let $formControl = _this.closest("div.form-group")
            let $beginDate = $formControl.find("input.begin-date");
            let $endDate = $formControl.find("input.end-date");

            if (day === 999999999) {
                $beginDate.val("");
                $endDate.val("");
                return;
            }

            let now = new Date();

            let subtractDate = subtract(day);
            $beginDate.val(beginDate(subtractDate));
            if (day <= 0) {
                $endDate.val(endDate(subtractDate));
            } else {
                $endDate.val(endDate(now));
            }
        }

        function subtract(day) {
            day = day < 0 ? -day : day;
            let now = new Date();
            let dateMillis = now.getTime();
            let dayMillis = day * 24 * 60 * 60 * 1000;
            now.setTime(dateMillis - dayMillis);
            return now;
        }

        function endDate(date) {
            date.setHours(23);
            date.setMinutes(59)
            date.setSeconds(59);
            return format(date, "yyyy-MM-dd HH:mm:ss");
        }

        function beginDate(date) {
            date.setHours(0);
            date.setMinutes(0)
            date.setSeconds(0);
            return format(date, "yyyy-MM-dd HH:mm:ss");
        }

        function format(date, fmt) {
            let o = {
                "M+": date.getMonth() + 1,                 //月份
                "d+": date.getDate(),                    //日
                "H+": date.getHours(),                   //小时
                "m+": date.getMinutes(),                 //分
                "s+": date.getSeconds(),                 //秒
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds()             //毫秒
            };
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (let k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }

    });

</script>